<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- react的根元素 插入一个根组件 -->
    <div id="example"></div>
</body>
</html>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.js"></script>
<script type="text/babel">
    class MyComponent extends React.Component{
        constructor(props)
        {
            super(props)

            this.state = {
                txt:'',
                content:'',
                city:'gz',
                isChecked:false
            }

            this.handleChange = this.handleChange.bind(this)
            this.handleContent = this.handleContent.bind(this)
            this.handleCity = this.handleCity.bind(this)
            this.handleChecked = this.handleChecked.bind(this)
        }

        handleChange(e)
        {
            this.setState({
                txt: e.target.value
            })
        }

        handleContent(e)
        {
            this.setState({
                content: e.target.value
            })
        }

        handleCity(e)
        {
            this.setState({
                city: e.target.value
            })
        }

        handleChecked(e)
        {
            this.setState({
                isChecked: e.target.checked
            })
        }


        render()
        {
            return(
                <div>
                    {/* 文本框 */}
                    <input type="text" value={this.state.txt} onChange={this.handleChange} />
                    <p>文本框输入的值：{this.state.txt}</p>
                    <br />

                    {/*富文本框*/}
                    <textarea value={this.state.content} onChange={this.handleContent}></textarea>
                    <p>富文本框输入的值：{this.state.content}</p>
                    <br />

                    {/*下拉框*/}
                    <select value={this.state.city} onChange={this.handleCity}>
                        <option value="sh">上海</option>
                        <option value="bj">北京</option>
                        <option value="gz">广州</option>
                    </select>
                    <p>下拉框选择的值：{this.state.city}</p>
                    <br />

                    {/*复选框*/}
                    <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked} />
                    <p>复选框的值：{this.state.isChecked ? '选中' : '未选中'}</p>
                    <br />
                </div>
            )
        }
    }

    ReactDOM.render(
        <MyComponent />,
        document.getElementById('example')
    )
</script>